<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="访问记录" :isAppBtn="false" :isHome="false"></HeadCustom>
		<view class="tabs-nav fboxRow Ycenter">
			<view class="tabs-item fboxRow Ycenter font32" 
			v-for="(item, index) in navList" :class="{active: navIndex == index}" :key="index"
			@tap="navTap(item, index)">{{item.title}}</view>
		</view>
		<view class="list-box">
			<view v-for="(item, index) in userList" :key="index">
				<CardItem :innerData="item" />
			</view>
			<u-loadmore fontSize="24rpx" :status="userPage.loading" />
		</view>
	</view>
</template>

<script>
import { memberVisitors, memberBrowse } from '@/api/mine.js';
import CardItem from '@/components/card/card-item.vue'
export default {
	components:{
		CardItem
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			navIndex: 0,
			navList: [
				{title: '访问过我', key: 'commentNum'},
				{title: '我看过的', key: 'browseCount'},
			],
			userList: [],
			userPage:{
				current: 1,
				size: 20,
				total: 0,
				loading: 'loading',
			},
		};
	},
	onLoad(option) {
		this.getInit();
	},
	onReachBottom() {
		if (this.userPage.size * this.userPage.current < this.userPage.total) {
			this.userPage.loading = 'loading';
			this.userPage.current ++
			this.getList();
		} else {
			this.userPage.loading = 'nomore';
		}
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getInit();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		goPage(item) {
			this.$pageTo('/CardDetail', { id: item.memberId });
		},
		navTap(item, index){
			this.navIndex = index
			this.getInit()
		},
		getInit() {
			this.userList = []
			this.userPage = {
				current: 1,
				size: 20,
				total: 0,
				loading: 'loading',
			}
			this.getList();
		},
		// 分页查询列表
		getList() {
			const api = this.navIndex == 0 ?  memberVisitors : memberBrowse
			api({ current: this.userPage.current , size: this.userPage.size }).then(res => {
				if (res.data) {
					this.userList = this.userList.concat(res.data.list);
					this.userPage.total = res.data.total;
					const {total, current, size} = res.data
					if (total < current * size) {
						this.userPage.loading = 'nomore';
					}
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
.tabs-nav{padding: 0 20rpx;height: 88rpx;}
.tabs-nav .tabs-item{padding: 0 20rpx;height: 88rpx;position: relative;}
.tabs-nav .tabs-item.active{font-weight: bold;}
.tabs-nav .tabs-item.active::before{content: '';position: absolute;bottom: 0;left: 50%;margin-left: -20rpx; width: 40rpx;height: 6rpx;border-radius:6rpx;background-color: var(--titleFontColor);overflow: hidden;}
.list-box{padding: 0 24rpx 24rpx;}
</style>
